import LampCirclePicker from '@/components/CircleProgressView';
import { View, Text, Button } from '@ray-js/components';
import React, { useEffect, useState } from 'react';
import { Image } from '@ray-js/smart-ui';
import homeIcon from '../../res/imgs/ic_main_home.png';
export default function Test() {
  const [temperature, setTemperature] = useState(0);

  const handleMove = (v: number) => {
    setTemperature(v);
  };

  const handleEnd = (v: number) => {
    setTemperature(v);
  };
  useEffect(() => {
    setTimeout(() => {
      setTemperature(100);
    }, 3000);
  }, []);
  
  const [hideTh, setHideThumb] = useState(false);
  return (
    <View
      style={{
        width: '100vw',
        height: '100vh',
        backgroundColor: 'green',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <Text style={{ color: 'black' }}>Hello world</Text>
      <LampCirclePicker
        value={temperature}
        useEventChannel
        hideThumb={hideTh}
        radius={132}
        innerRingRadius={110}
        colorList={[
          { offset: 0, color: '#FFCD65' },
          { offset: 0.5, color: '#FEECAB' },
          { offset: 1, color: '#CEEDFF' },
        ]}
        onTouchMove={handleMove}
        onTouchEnd={handleEnd}
        renderInnerCircle={() => (
              <View
                style={{
                  flexDirection: 'column',
                  width: '250rpx',
                  height: '250rpx',
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
              >
                <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                  <Text style={{ fontSize: '15px', opacity: 0 }}>11</Text>
                  <Text style={{ fontSize: '12px', opacity: 0 }}>22</Text>
                  <Image useLoadingSlot width="51rpx" height="40rpx" src={homeIcon} fit="contain" slot={{
                    loading: <View style={{ width: "51rpx", height: '40rpx', backgroundColor: '#606060' }}></View>
                  }} />
                  <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start' }}>
                    <Text style={{ fontSize: '15px', color: 'blue' }}>25</Text>
                    <Text style={{ fontSize: '12px', color: 'blue' }}>C</Text>
                  </View>
                </View>

                <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start' }}>
                  <Text style={{ fontSize: '12px', color: '#ffffff', paddingTop: '20rpx', opacity: 0 }}>C</Text>
                  <Text style={{ fontSize: '70px', color: '#ffffff' }}>28</Text>
                  <Text style={{ fontSize: '12px', color: '#ffffff', paddingTop: '20rpx' }}>C</Text>
                </View>
                {/* // opacity: isVisible ? 1 : 0 // isVisible 是一个布尔值，控制显示或隐藏 */}
                <Text style={{ color: '#DF3C13', fontSize: '15px', fontWeight: "bold", opacity:  1 }}>heating</Text>
                <View>
                </View>
              </View>
            )}
      />
      <Button onClick={()=>{
        setHideThumb(!hideTh);
        console.log('hideThumb-2', hideTh);
      }}>隐藏2</Button>

    </View>
  );
}